<template>
    <div>
        <el-table
           
            width="100%"
            height="max(calc(100vh - 534px), 200px)"
           >
            <el-table-column min-width="150px" fixed>
                <template #header>
                    <el-input size="small"  placeholder="搜索委托列表" clearable />
                </template>
                <template #default="scope">
                    <div class="plain-tag-icon-container">
                        <el-tag type="warning" size="small" :disable-transitions="true" effect="plain" class="plain-tag-icon">撤</el-tag>
                    </div>
                    <span></span>&nbsp;<el-tag :disable-transitions="true" effect="plain" size="small"></el-tag>
                </template>
            </el-table-column>
            <el-table-column label="买卖">
                <template #default="scope">
                    <el-tag :type="danger" :disable-transitions="true" effect="light"></el-tag>
                </template>
            </el-table-column>
            <el-table-column label="报价类型" >
                <template #default="scope">
                    <el-tag :disable-transitions="true" effect="light"></el-tag>
                </template>
            </el-table-column>
            <el-table-column label="委托价格(元)" min-width="110px" align="right" prop="ordPrice"  />
            <el-table-column label="成交/委托数量(股)" min-width="140px" align="right" prop="ordQty"  />
            <el-table-column label="成交均价(元)" min-width="110px" align="right"  />
            <el-table-column label="委托时间" prop="_sendLocTime"  />
            <el-table-column label="委托状态" min-width="94px" prop="ordStatus"
                             column-key="status"
                             :filters="[
                            {text: '默认', value: '0'},
                            {text: '新订单', value: '1'},
                            {text: '已确认', value: '2'},
                            {text: '部分成交', value: '3'},
                            {text: '全部成交', value: '4'},
                            {text: '部分成交部分撤单', value: '5'},
                            {text: '已撤', value: '6'},
                            {text: '废单', value: '7'}
                        ]"
            >
                <template #default="scope">
                    <el-tag :disable-transitions="true" effect="light"></el-tag>
                </template>
            </el-table-column>
            <el-table-column label="确认时间" prop="_cnfTime"  />
            <el-table-column label="委托编号" prop="ordid" />
            <el-table-column label="是否撤单" prop="isCancel">
                <template #default="scope">
                    <el-tag :disable-transitions="true" effect="light"></el-tag>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background layout="prev, pager, next"  :current-page="pn" :page-size="pz" :total="total" />
    </div>
</template>

<style scoped lang="scss">
.plain-tag-icon-container {

    position: absolute;
    top: 0;
    left: 0;
    line-height: 2px;

    .plain-tag-icon {
        padding: 0;
        height: fit-content;
        border: none;
        font-size: 12px;
        margin-left: 2px;
    }
}
</style>